<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <title>loop-wall</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    .stage-area{
      position: absolute;
      left: 50%;
      top:40%;
      width: 128px;
      height: 100px;
      transform: translate3d(-50%, -50%, 0);
      perspective: 2000px;
      perspective-origin: 50% -60%;
    }
    .stage-area__container {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform-origin: 0 0;
      /*animation: action 100s linear infinite;*/
    }
    .stage-area__container__img {
      position: absolute;
      object-fit: cover;
      border: 3px;
    }
    .stage-area__container__background {
      position: absolute;
      width: 500px;
      height: 100vh;
      background: aqua;
      margin-left: -250px;
      margin-top: -34vh;
      animation: actionB 100s linear infinite;
    }

    @keyframes action {
      from {
        transform: rotate3d(0, 1, 0, 0);
      }
      to {
        transform: rotate3d(0, 1, 0, -720deg);
      }
    }
    @keyframes actionB {
      from {
        transform: rotate3d(0, 1, 0, -720deg);
      }
      to {
        transform: rotate3d(0, 1, 0, 0);
      }
    }

    .stage-area__logo {
      width: 523px;
      margin: 0 auto;
      position: absolute;
      z-index: 10;
      transform: translate3d(-50%, -25%, 0px);
      display: flex;
      justify-content: space-between;
      transform-style: preserve-3d;
    }
    .stage-area__logo__img{
      width: 250px;
      object-fit: cover;
      border-radius: 6px;
    }
    .stage-area__fly {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 11;
    }
    .stage-area__fly__img {
      position: absolute;
      animation: fly 2s ease-out both infinite;
      width: 60px;
      height: 60px;
      transform-style: preserve-3d;
    }
    @keyframes fly {
      0% {
        transform: translate3d(-100vh, 60vh, 100vh) scale(1.6);
        opacity: 1;
      }
      97% {
        transform: translate3d(-50vh, 5vh, 0) scale(1);
        opacity: 1;
      }
      100% {
        transform: translate3d(-50vh, 5vh, 0) scale(1);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <button id="add">add</button>
    <section class="stage-area">
      <div id="container" class="stage-area__container">
        <div class="stage-area__container__background"></div>
      </div>
      <article class="stage-area__logo">
        <img class="stage-area__logo__img" src="https://p2.ssl.qhimgs1.com/sdr/400__/t01505643460c106d18.webp" alt="">
        <img class="stage-area__logo__img" src="https://p2.ssl.qhimgs1.com/sdr/400__/t01505643460c106d18.webp" alt="">
      </article>
      <article class="stage-area__fly">
        <img class="stage-area__fly__img" src="https://p.ssl.qhimg.com/sdm/240_240_/t01301fb9a135b1cfd7.jpg?t=1575619377" alt="">
      </article>
    </section>
  </div>
  <script>
    const IMG_W = 60
    const IMG_H = 60
    const container = document.getElementById('container')
    const list = new Array(10 * 10).fill({})
    let listIndex = 0
    function _init() {
      // createBackground()
      buildList(list)
    }

    function buildList(list) {
      let fragment = document.createDocumentFragment()
      const oldIndex = listIndex
      const len = list.length
      const rowLimit = 50
      const angle = 360 / rowLimit
      const minZ = (IMG_W / 2) / (Math.tan( angle / 2 / 180 * Math.PI))
      list.forEach((item, index) => {
        if (index < oldIndex) return
        const row  = Math.floor(index / rowLimit)
        if (row >= 3) return
        fragment.appendChild(createImage(item, index, angle, minZ, row))
      })
      listIndex = len
      container.appendChild(fragment)
    }

    function createImage(item, index, angle, minZ, row) {
      const img = new Image()
      img.src = 'https://p1.ssl.qhimgs1.com/sdr/400__/t01d6887dfae29d6d21.webp'
      img.height = IMG_W
      img.width = IMG_H
      img.className = 'stage-area__container__img'
      img.style = `transform: rotateY(${angle * index * -1}deg) translateZ(${minZ * 1.1}px) translateY(${IMG_H * row * 1.2}px)`
      return img
    }

    function createBackground() {
      const fragment = document.createDocumentFragment()
      new Array(360).fill(1).forEach((item, index) => {
        const div = document.createElement('div')
        div.className = 'stage-area__container__background'
        div.style = `transform: rotateY(${index * -1}deg) translateZ(${0}px)`
        fragment.appendChild(div)
      })
      container.appendChild(fragment)
    }

    function addImage() {
      list.push({})
      buildList(list)
    }

    _init()

    add.addEventListener('click', addImage)
  </script>
</body>
</html>
